<template>
	<view class="wrapper-order-detail">
		<view class="header-c">
			<view class="h-item flex">
				<view class="title">订单编号</view>
				<view class="tt">{{orderInfo.orderNo}}<uni-icons v-if="orderInfo.flag == 0" style="margin-left: 6rpx;display: inline-block;" type="daifu" size="14" color="rgba(52,120,247,.8)"></uni-icons></view>
			</view>
			<view class="h-item flex">
				<view class="title">下单时间</view>
				<view class="tt">{{orderInfo.createTime}}</view>
			</view>
			<view class="h-item flex">
				<view class="title">客户名称</view>
				<view class="tt">{{orderInfo.customerName}}</view>
			</view>
			<view class="h-item flex">
				<view class="title">收货地址</view>
				<view class="tt">{{orderInfo.address}}</view>
			</view>
			<view class="h-item flex">
				<view class="title">归属区域</view>
				<view class="tt">{{orderInfo.salesAreaText}}</view>
			</view>
			<view class="h-item flex">
				<view class="title">归属路线</view>
				<view class="tt">{{orderInfo.routeText}}</view>
			</view>
			<view class="h-item flex">
				<view class="title">归属业务人</view>
				<view class="tt">{{orderInfo.salesManText}}</view>
			</view>
			<view class="h-item flex">
				<view class="title">送货日期</view>
				<view class="tt" v-if="orderInfo.status == 0 && cusType != 2 " @click="toggleTab('senddate')">{{defaultSendDate}}</view>
				<view class="tt" v-else >{{defaultSendDate}}</view>
			</view>
		</view>
		<!-- 商品信息 -->
		<view class="goods-info">
			<view class="title">商品信息</view>
			<view class="table-c">
				<!-- <v-table :columns="columnsOperate" :list="dataOperate" ></v-table> -->
				<t-table>
					<t-tr >
						<t-th :fixedWidth="200">商品名称</t-th>
						<t-th :fixedWidth="94">单位</t-th>
						<t-th :fixedWidth="110">单价</t-th>
						<t-th :fixedWidth="110">数量</t-th>
						<t-th class="cus">小计（元）</t-th>
						<!-- <t-th :fixedWidth="196">小计（元）</t-th> -->
					</t-tr>
					<t-tr v-for="(item,index) in dataOperate" :key="index">
						<t-td :fixedWidth="200">{{ item.goodsText }}</t-td>
						<t-td :fixedWidth="94">{{ item.specsText }}</t-td>
						<t-td :fixedWidth="110">{{ item.yhPrice }}</t-td>
						<t-td :fixedWidth="110" v-if="orderInfo.status == 0 && cusType != 2"  @click="modify('tips',item)">{{ item.sendNum }}</t-td>
						<t-td :fixedWidth="110" v-else>{{ item.sendNum }}</t-td>
						<t-td  class="cus">{{ item.yhPrice * item.sendNum | fixedT }}</t-td>
						<!-- <t-td  :fixedWidth="196">{{ item.total }}</t-td> -->
					</t-tr>
				</t-table>
			</view>
			
		</view>
		<view class="goods-total flex">
			<view>共{{totalNum}}种商品 </view>
			<view> 应收金额：{{totalMoney}}元</view>
		</view>
		<!-- 除业务员外待审核订单有修改权限 -->
		<view class="button" v-if="orderInfo.status == 0 && cusType != 2 ">
			<button type="primary" @click="saveEdit">保存</button>
		</view>
		<!-- 只有管理员有审核权限 -->
		<view class="button" v-if="orderInfo.status == 0 && cusType == 0 ">
			<button type="primary" @click="reviewOrder">审核</button>
		</view>
		
		<!-- <uni-icons class="order-c" v-if="orderInfo.status == 6"  type="yiwancheng" size="80" color="#2E8706"></uni-icons> -->
		<!-- 修改商品数量 -->
		<uni-popup ref="showtips" type="center">
			<view class="uni-tips">
				<view class="hd flex">
					<view>请输入</view>
					<view>
						<uni-icons type="guanbi1" size="24" color="#fff" @click="cancel('tips')"></uni-icons>
					</view>
				</view>
				<view class="bd flex">
					<view class="item flex">
						<view class="label">数量:</view>
						<view class="ipt">
							<!-- <input type="number" v-model.trim="tempChangeNum" /> -->
							<uni-number-box :value="tempChangeNum" @change="setChangeNum" />
						</view>
					</view>
					<view class="btns">
						<button type="primary" size="mini" @click="changeNum('tips')">确定</button>
						<button type="default" size="mini" @click="cancel('tips')">取消</button>
					</view>
				</view>
			</view>
		</uni-popup>
		<!-- 送货日期选择 -->
		<w-picker
			mode="date" 
			startYear="2017" 
			endYear="2030"
			:defaultVal="defaultSendDate"
			:current="false" 
			@confirm="onConfirm"
			:disabledAfter="false"
			ref="senddate" 
			themeColor="#f00"
		></w-picker>
	</view>
</template>

<script>
	import {
	  mapState,
	  mapMutations
	 } from 'vuex'
	import tTable from '@/components/t-table/t-table.vue';
	import tTh from '@/components/t-table/t-th.vue';
	import tTr from '@/components/t-table/t-tr.vue';
	import tTd from '@/components/t-table/t-td.vue';
	import Request from '@/request/request.js'
	import uniIcons from '@/components/uni-icon/uni-icon.vue'
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	import uniNumberBox from '@/components/uni-number-box/uni-number-box.vue'
	import wPicker from "@/components/w-picker/w-picker.vue"
	export default {
		components: {
			tTable,
			tTh,
			tTr,
			tTd,
			uniIcons,
			uniPopup,
			uniNumberBox,
			wPicker
		},
		filters:{
			fixedT(value){
				if (!value) return ''
				return value.toFixed(2)
			}
		},
		data() {
			return {
				orderId:'',//订单id
				orderInfo:{},//订单详情
				dataOperate: [],//商品信息列表
				tempChangeNum:'',//数量修改中间变量
				modifyItem:{},//记录需要修改的商品
				defaultSendDate:''
			}
		},
		onLoad(options) {
			if(options.orderId){
				this.orderId = options.orderId
				this.getOrderDetail()
			}
			
		},
		computed:{
			 ...mapState(['cusType']),
			totalNum(){
				return this.dataOperate.length
			},
			totalMoney(){
				let total = 0;
				this.dataOperate.forEach(item =>{
					total += item.yhPrice * item.sendNum
				})
				return total.toFixed(2)
			}
		},
		methods: {
			getOrderDetail(){
				Request({url:`order/getOrderById/${this.orderId}`,method:'GET'})
					.then(res =>{
						if(res.code == 0){
							this.dataOperate = res.data.orderDetails
							this.orderInfo = res.data
							this.defaultSendDate = this.orderInfo.sendDate
							if(this.orderInfo.status == 6 || this.orderInfo.status == 0){
								// #ifdef APP-PLUS
								    let currentWebview = this.$mp.page.$getAppWebview();
								    let tn = currentWebview.getStyle().titleNView;
									if(this.orderInfo.status == 6){
										tn.buttons[0].text = '已发货';     //[0] 按钮的下标
									}else{
										tn.buttons[0].text = '待审核';     //[0] 按钮的下标
										tn.buttons[0].color = '#FB4949'
									}
								    currentWebview.setStyle({ 
								    titleNView: tn 
								    });
								// #endif
							}
							
						}
					}).catch(err => {})
			},
			reviewOrder(){
				Request({url:`order/review/${this.orderId}`,method:'GET'})
					.then(res => {
						if(res.code == 0){
							uni.showToast({
								title:'审核成功!',
								icon:'none',
								duration:1000
							})
							uni.navigateBack({
								
							})
						}
					}).catch(err => {})
			},
			toggleTab(str){
				if(!this.defaultSendDate) return
				// #ifdef APP-PLUS
				plus.key.hideSoftKeybord()
				// #endif
				this.toggleType = str
				this.$refs[str].show();
			},
			onConfirm(val){
				this.defaultSendDate = val.result;
			},
			modify(open,item){
				this.modifyItem = item
				this.tempChangeNum = this.modifyItem.sendNum || 0
				this.$nextTick(() => {
					this.$refs['show' + open].open()
				})
			},
			setChangeNum(val){
				this.tempChangeNum = Number(val)
			},
			changeNum(type){
				this.modifyItem.sendNum = this.tempChangeNum
				this.$refs['show' + type].close()
			},
			cancel(type) {
				this.$refs['show' + type].close()
				if(type == 'tip'){
					this.tipShow = false
				}
			},
			saveEdit(){
				console.log(1231)
				let params = {
					id:this.orderId,
					customerId:this.orderInfo.customerId,
					sendDate:this.defaultSendDate
				}
				params.orderDetails = this.dataOperate.map(item => {
					return {
						goodsId:item.goodsId,
						yhPrice:item.yhPrice,
						sendNum:item.sendNum,
						totalMoney:(item.yhPrice*item.sendNum).toFixed(2)
					}
				})
				console.log(params)
				Request({url:'/order/editSave',method:'POST',data:params})
					.then(res => {
						if(res.code == 0){
							uni.showToast({
								title:'修改成功!',
								icon:'none',
								duration:1000
							})
						}
					}).catch(err => {})
			}
		}
	}
</script>

<style lang="less" scoped>
@borderColor: #F4F5F6;
.wrapper-order-detail{
	
	min-height: calc(100% - 1px);
	width: 100%;
	background-color: #FFFFFF;
	margin-top: 1px;
	padding-bottom: 80rpx;
	.header-c{
		position: relative;
		z-index: 11;
		.h-item{
			min-height: 88rpx;
			padding: 12rpx 30rpx;
			// justify-content: space-between;
			align-items: center;
			border-bottom: 1px solid @borderColor;
			.title{
				width: 160rpx;
				flex-shrink: 0;
			}
			.tt{
				flex: 1;
				text-align: right;
			}
		}
	}
	.goods-info{
		.title{
			height: 80rpx;
			background-color: rgba(238, 238, 238, 1);
			padding: 0 20rpx;
			line-height: 80rpx;
			&::before{
				content: "*";
			}
		}
		.table-c{
			padding: 20rpx;
			.cus{
				flex:1;
			}
		}
	}
	.goods-total{
		padding: 0 20rpx 60rpx;
		justify-content: space-between;
		// margin-bottom: 60rpx;
	}
	.button{
		padding: 0 30rpx 30rpx;
		background-color: #FFFFFF;
		// margin-bottom: 80rpx;
	}
	.order-c{
		position: absolute;
		top:14rpx;
		right: 50rpx;
		z-index: 1;
	}
	/* 数量修改窗口 */
	.uni-tips {
		/* #ifndef APP-NVUE */
		display: flex;
		flex-direction: column;
		/* #endif */
		// padding: 15px;
		width: 290px;
		background-color: #fff;
		border-radius: 10px;
		overflow: hidden;
		.hd{
			height: 80rpx;
			background: #1784da;
			justify-content: space-between;
			align-items: center;
			font-size: 28rpx;
			color: #fff;
			padding:0 20rpx 0 40rpx;
		}
		.bd{
			flex-direction: column;
			padding: 40rpx;
			.item{
				align-self: center;
				align-items: center;
				margin-bottom: 30rpx;
				.label{
					width: 140rpx;
					padding-right: 16rpx;
					text-align: right;
				}
				.ipt{
					// width: 280rpx;
					height: 70rpx;
					// border: 1px solid #C0C0C0;
					// text-align: center;
					display: flex;
					align-items: center;
					// padding: 16rpx 0;
				}
			}
			.btns{
				text-align: center;
				button[type=primary]{
					background-color:#1784da ;
				}
				button[size=mini]{
					padding: 0 30rpx;
				}
				button+button{
					margin-left: 24rpx;
				}
			}
		}
	}
}
</style>
